import React, { FC, useEffect, useState,useRef } from "react";
import { Row, Col, Form, Input, Button,Cascader ,Radio,Switch,message } from 'antd';
import { NavigateFunction, useNavigate, useLocation, } from 'react-router'
import {useSearchParams} from "react-router-dom"
import '../../static/css/App.css'
import '../../static/css/Administration/adadd.css'
import {Addadmin,Department,Updata,IDinfo} from '../../apis/administrators'


const Addadd: FC = (prpprs:any):JSX.Element => {
    const kkk:any = useRef()
    const naviget = useNavigate()
    const [params] = useSearchParams()

    
    // let {state:{i}}= useLocation();
    // console.log(id);
    //开关
    const onChanges:any = (checked: boolean) => {
        console.log(`switch to ${checked}`);
      };

      //部门列表
      const Depa  = async () => {
        const res:any = await Department()
        if(res.code==='00000'){
            setoption(res.data)
        }
        
      }
      const iiInfo =async () =>{
        const res:any = await IDinfo({id:params.get('id')})
        if(res.code==='00000'){
            console.log(kkk);
            
            kkk.current.setFieldsValue(res.data)
            console.log(res);
            
        }
      }
      useEffect(()=>{
        Depa()
        // console.log(params.get('id'))
        if(params.get("id")){
            iiInfo()
        }
        
      },[])
      //根据id获取单挑信息
    
    //三级联动
    const fieldNames={ label: 'name', value: 'id', children: 'son' }
    const [options,setoption]:any  = useState() 
      
      const onChange:any = (value: string[]) => {
        console.log(value);
      };
      


    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const validateMessages = {
        types: {
            email: '请填写正确的邮箱',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    //添加
    const onFinish = (e: any) => {
        // console.log(e);
        if(params.get('id')){
            const Infooo = {
                "admin_id":params.get('id'),//管理员id
                "formdata":{ //表单数据
                    "admin_name": e.admin_name, 
                    "email": e.email, 
                    "mobile": e.mobile, 
                    "is_use": e.is_use, 
                    "pwd": e.pwd, 
                    "repwd": e.repwd ,
                    "real_name":e.real_name,
                    "wechat":"微信号",
                    "qq":"QQ号",
                    "remarks":e.remarks,
                    
                }
            }
            Updata(Infooo).then((res:any)=>{
                // console.log(res);
                if(res.code==='00000'){
                    message.success("修改成功")
                    naviget("/Admin/Adlist")
                }
                
            })
        }else{
            const Info = {
                "admin_name": e.admin_name, 
                "email": e.email, 
                "mobile": e.mobile, 
                "is_use": e.is_use, 
                "pwd": e.pwd, 
                "repwd":e.repwd, 
                "real_name":e.real_name,
                "wechat":"微信号",
                "qq":"QQ号",
                "remarks":e.remarks,
                "role":e.role,
                "department":e.department.slice(-1)[0]//部门
            }
            Addadmin(Info).then((res:any)=>{
                // console.log(res);
                if(res.code==='00000'){
                    message.success("添加成功")
                    naviget("/Admin/Adlist")
                }
                
            })
        }
        
        
    };
    // 重置
    const Reset = () => {

    }

    return (
        <div className="admin">
            <div>
                <Row>
                    <Col span={24}>{params.get('id') ? <span className="tjj">修改</span> : <span className="tjj">添加</span>}</Col>
                </Row>
            </div>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages} ref={kkk} >
            <div className="from">
                    <Row >
                        <Col span={11}>
                            <Form.Item name='admin_name' label="管理员名称" rules={[{ required: true }]}>
                                <Input placeholder="请输入管理员名称" />
                            </Form.Item>
                            <Form.Item name='email' label="邮箱" rules={[{ type: 'email' }]}>
                                <Input placeholder="请输入邮箱" />
                            </Form.Item>
                            <Form.Item name='mobile' label="手机号" rules={[{ required: true }]}>
                                <Input placeholder="请输入手机号" />
                            </Form.Item>
                            <Form.Item
                                name='pwd'
                                label="管理员密码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码',
                                    },
                                ]}
                                hasFeedback
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item
                                name='repwd'
                                label="确认密码"
                                // dependencies={['user', 'pwd']}
                                hasFeedback
                                rules={[
                                    {
                                        required: true,
                                        message: '请再次输入密码',
                                    },
                                    ({ getFieldValue }) => ({
                                        validator(_, value) {
                                            if (!value || getFieldValue('pwd') === value) {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                        },
                                    }),
                                ]}
                            >
                                <Input.Password />
                            </Form.Item>
                        </Col>
                        <Col  span={11}>
                            <Form.Item name='real_name' label="真实姓名" rules={[{ required: true }]}>
                                <Input placeholder="请输入真实姓名" />
                            </Form.Item>
                            <Form.Item name='department' label="部门" rules={[{ required: true }]}>
                                <Cascader fieldNames={fieldNames} options={options} onChange={onChange} changeOnSelect />
                            </Form.Item>
                            
                            <Form.Item name='role' label="角色">
                                <Radio.Group>
                                    <Radio value={1}>经管负责人</Radio>
                                    <Radio value={2}>部门负责人</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item name='is_use' label="是否启用">
                                <Switch defaultChecked  onChange={onChanges} />
                            </Form.Item>
                            <Form.Item name='remarks' label="备注">
                                <Input.TextArea />
                            </Form.Item>
                            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                                <Button style={{margin:'0 10px',backgroundColor:"#999",color:"#fff"}} onClick={Reset}>重置</Button>
                                {params.get('id') ?<Button type="primary" htmlType="submit">修改</Button> : <Button type="primary" htmlType="submit">添加</Button>}

                            </Form.Item>
                        </Col>
                    </Row>
                </div>
            </Form>
        </div>
    )
}

export default Addadd